<%@page language="java" import="util.*, java.sql.*, beans.*, java.text.*" %>
<%@page pageEncoding="UTF-8"%>

<html>
    <head>
        <style type="text/css">
            
            * { font:12px Arial; color:#000;}            
            html, body { margin:0; padding:0; border:0;}
            html { height:100%; border:0; border-right:1px #fff solid;}
            body { padding:20px;}
            
            a { color:#000; text-decoration:none;}
            a:hover { color:#f00; text-decoration:underline;}            
            #photo {}            
            #photo h4 { clear:both; margin:10px 0;}
            #photo h4 * { font:bold 14px Tahoma; color:#c03;}            
            #photo ul { padding:0; margin:10px 0;}
            *html #photo ul { height:1%;}
            #photo ul:after { content:"."; display:block; height:0; clear:both; visibility:hidden;}
            
            #photo li { float:left; padding:10px; list-style-type:none;}
            #photo li a { display:block; padding:1px;}
            #photo li a img  { border:1px #2D332D solid;}
            #photo li a span { display:none;}
            #photo li a:hover { border:2px #FF0084 solid; padding:0;}
            #photo li a:hover img { border:0;}
            #photo li a:hover span { display:block; position:absolute; margin:3px 0 0 -72px; background:url(25_131414_img_date.gif); font-size:11px; text-decoration:none; text-transform:uppercase; text-align:center; width:58px; height:16px; line-height:16px; cursor:pointer;}
            #photo li a:hover > span { margin:-72px 0 0 3px; padding:2px 0 0; line-height:14px; height:14px;}            
        </style>    
        
        <link type="text/css" href="1.css" rel="stylesheet" media="screen" />
        <title>Item Detail Page</title>
        <script>
            function changePic(s) {
                //alert(s);
                document.getElementById("mainPic").src = '../image/' + s;                
            }
        </script>
    </head>
    <body>
        <%
        
        String imageURL = request.getParameter("imageURL");
        String itemId = "", name = "", type = "", company = "", scale = "", price = "", description = "", imageURLs = "";
        int quantity = 0;
        ModelBean[] bean = ModelBean.getAllModelByImageURL(imageURL);
        for (int i=0; i<bean.length; i++) {
            itemId = bean[i].getItemID();
            name = bean[i].getName();
            type = bean[i].getType();
            company = bean[i].getCompany();
            scale = bean[i].getScale();
            price = bean[i].getPrice();
            description = bean[i].getDescription();
            quantity = bean[i].getQuantity();
            if (description == null) {
                description = "empty";
            }
            
            String[] images = ModelBean.getImages(itemId);
            DecimalFormat df = new DecimalFormat("#.00");
        %>
        <center><h3>Item Detail</h3>
            <form action="SavecartServlet" method="post">
                <table width="<%if(images.length > 0) {out.print("1000"); }else{ out.print("800"); }%>" border="1">
                    <tr>
                        <td width="<%if(images.length > 0){ out.print("600"); }else{ out.print("450"); }%>" rowspan="7" align="center" valign="middle">
                            
                            <%
                            
                            if (images.length > 0) {
                            %>                            
                            <table border="1" width="600">
                                <tr height="400"  align="center">
                                    <td>
                                        <img id="mainPic"  src='../image/<%=imageURL%>' width="300" height="300"/>
                                    </td>
                                </tr>                           
                                <tr height="120">
                                    <td>
                                        <div id="photo">
                                            <ul>
                                                <li><a href="#"><img src='../image/<%=imageURL%>' width="120" height="120"  onclick="changePic('<%=imageURL%>')"/><span></span></a></li>
                                                
                                                <%
                                                for (int j=0; j<images.length; j++) {
                                                    imageURLs = images[j];
                                                %>
                                                
                                                <li><a href="#"><img src='../image/<%=imageURLs%>' width="120" height="120" onClick="changePic('<%=imageURLs%>')"/><span></span></a></li>
                                                
                                                <%
                                                }
                                                %>
                                            </ul>
                                            Click the picture to enlarge
                                        </div>
                                    </td>
                                </tr> 
                            </table>
                            <%
                            }else {
                            
                            %>
                            <img src='../image/<%=imageURL%>'/>
                            <%
                            }
                            %>
                        </td>
                    </tr>
                    <tr>
                        <td align="left" valign="middle">Name:</td>
                        <td align="left" valign="middle"><%=name%></td>
                    </tr>
                    <tr>
                        <td align="left" valign="middle">Type:</td>
                        <td align="left" valign="middle"><%=type%></td>
                    </tr>
                    <tr>
                        <td align="left" valign="middle">Company:</td>
                        <td align="left" valign="middle"><%=company%></td>
                    </tr>
                    <tr>
                        <td align="left" valign="middle">Scale:</td>
                        <td align="left" valign="middle"><%=scale%></td>
                    </tr>
                    <tr>
                        <td align="left" valign="middle">Price:</td>
                        <td align="left" valign="middle">$<%=df.format(Double.parseDouble(price))%></td>
                    </tr>
                    <tr>
                        <td height="292" align="left" valign="top">Description:</td>
                        <td align="left" valign="top"><%=description%></td>
                    </tr>
                    
                    <tr>
                        <td height="42">&nbsp;</td>
                        <td> <%
                            String username = (String)session.getAttribute("username");
                            
                            if(username!=null && quantity > 0) {
                            %>
                            Quantity:  <select name="quantity">
                                <option value="1">1</option>
                                <option value="2">2</option>
                                <option value="3">3</option>
                                <option value="4">4</option>
                                <option value="5">5</option>
                                <option value="6">6</option>
                                <option value="7">7</option>
                                <option value="8">8</option>
                                <option value="9">9</option>
                                <option value="10">10</option>
                            </select>
                        <%}%></td>
                        <td align="center" valign="middle">
                            <%
                            if(username!=null) {
                                if (quantity > 0) {
                            %>
                            
                            <input name="Submit" type='Submit' value='Purchase'>
                            <%
                                }else {
                            %>
                            <font color="red">Out Of Stock!</font>
                            <%
                                }
                            } else {
                            %>  
                            Click <a href="login.jsp">here</a> to login.
                            <%
                            }
                            %>
                        </td>
                    </tr>
                </table>
                <input type='hidden' name='itemID' value='<%= itemId%>' />
                <input type='hidden' name='name' value='<%=name%>' />
                <input type='hidden' name='type' value='<%=type%>' />
                <input type='hidden' name='company' value='<%=company%>' />
                <input type='hidden' name='scale' value='<%=scale%>' />
                <input type='hidden' name='price' value='<%=price%>' />
                <input type='hidden' name='description' value='<%=description%>' />
                <input type='hidden' name='imageURL' value='<%=imageURL%>' />
            </form>
            <p>&nbsp;</p>
            <%}
            %>
            
        </center>
        
        
    </body>
</html>
